import React, {
  useEffect,
  useState,
} from 'react'
import Taro, { getCurrentInstance } from '@tarojs/taro'
import { Tabbar, TabbarItem, } from '@antmjs/vantui'
import IconFont from '../iconfont'
import './index.scss'

export default function TabBar(props) {
  return (
    <Tabbar active={props?.active} onChange={(e) => {
      switch (e.detail) {
        case 'home':
          Taro.reLaunch({ url: '/pages/home/index' })
          break;
        case 'application':
          Taro.reLaunch({ url: '/pages/application/index' })
          break;
        case 'square':
          Taro.reLaunch({ url: '/pages/square/index' })
          break;
        case 'mine':
          Taro.reLaunch({ url: '/pages/mine/index' })
          break;

        default:
          break;
      }
    }}>
      <TabbarItem name="home" renderIcon={<IconFont name='ac-shouye' size={40} />}
        renderIconActive={<IconFont name='ac-shouye' size={40} color={'#13b858'} />}>
        首页
      </TabbarItem>
      <TabbarItem name="application" renderIcon={<IconFont name='ac-yingyong' size={40} />}
        renderIconActive={<IconFont name='ac-yingyong' size={40} color={'#13b858'} />}>
        应用
      </TabbarItem>
      {/* <TabbarItem name="square" renderIcon={<IconFont name='ac-guangchang' size={40} />}
        renderIconActive={<IconFont name='ac-guangchang' size={40} color={'#13b858'} />}>
        广场
      </TabbarItem> */}
      <TabbarItem name="mine" renderIcon={<IconFont name='ac-wode' size={50} />}
        renderIconActive={<IconFont name='ac-wode' size={40} color={'#13b858'} />}>
        我的
      </TabbarItem>
    </Tabbar>
  )
}

